<template>
	<view style="width: 100%;height: 100%;">
		<view v-if="!circleShow">
		<!-- 标题栏样式-->
		<div class="title">
			<div class="flex">
				<div class="topBtnBoxYbb">
					<p :class="{active:activeIndex==0}">VIP等级</p>
					<p @click="changeActiveSlide()">主播等级</p>
					<p @click="changeActiveSlide()">爵位等级</p>
				</div>
				<p class="decalar" @click="goRulePage()">说明</p>
				<!--            v-if="sys!='ios'"-->
			</div>
			<div class="swiper-scrollbar"></div>
		</div>
		<!-- vip等级-->
		<div class="swiper-slide vipLevel">
			<!-- 中间用户个人信息样式-->
			<div class="userInfo "
				:style="'background: url('+vipdengjika+') no-repeat;background-size: contain;'">
				<div class="headInfo">
					<image class="headPic" style="margin-top: -30upx" :src="headImg" alt="" />
					</image>
					<view>
						<p class="nickName"><span>{{nickName}}</span>
							<image v-if="curLevel==0" :src="$BASE_URL+'/st/mini/static/img/vip1/vip0@2x.png'" class="costLevel" alt="" />
							</image>
							<image v-else-if="curLevel<20" :src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+curLevel+'@2x.png'"
								class="costLevel" alt="" mode="widthFix" />
							</image>
							<image v-else-if="curLevel==20" :src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+curLevel+'.gif'"
								class="costLevel" alt="" />
							</image>
						</p>
						<div class="levelLine">
							<p class="line"><span :style="'width:'+levelWidth+'upx;'"></span><span
							:style="'background: url('+faguang+') no-repeat center right;background-size: contain;'"></span>
							</p>
						</div>
						<div class="vipNow">
							<p>VIP{{curLevel>1000?(curLevel-1000):curLevel}}</p>

							<p v-if="curLevel<1000" :style="curLevel>(maxLevel-1)?'opacity:0':''">
								VIP{{curLevel>1000?(curLevel-1000+1):(curLevel+1)}}</p>

							<p v-else :style="curLevel>(1000+maxLevel-1)?'opacity:0':''">
								VIP{{curLevel>1000?(curLevel-1000+1):(curLevel+1)}}</p>
						</div>
					</view>
				</div>
				<p class="consumptionDetails" v-if="sys!='ios'">
					已消费: <span style="font-weight: bold">{{alreadyConsumed}}元</span> | 距升级: <span
						style="font-weight: bold">{{upGrade}}元</span>
				</p>
				<p class="consumptionDetails" v-if="sys=='ios'">
					已消费: <span style="font-weight: bold">{{iosAlreadyConsumed}}钻</span> | 距升级: <span
						style="font-weight: bold">{{iosUpGrade}}钻</span>
				</p>
			</div>
			<!-- 去升级样式-->
			<div class="upgrade" @click="changeActiveSlide"
				:style="'background: url('+qvshengji+') no-repeat center right;background-size: contain;'">
			</div>
			<!-- 底部特权样式-->
			<div class="privilege"
			:style="'background: url('+huxing+') no-repeat;background-size: contain;'">
				<image class="vipTeQuan" :src="$BASE_URL+'/st/mini/static/img/level/viptequan.png'" alt="" />
				</image>
				<div class="bottomcontainer">
					<div class="flexBox" v-for="(item,index) in 3">
						<div v-for="(temp,order) in vipLevel" v-if="index==0&&order<3" @click="changeVip(order)">
							<!--<p   class="blank"></p>-->
							<p class="alertMessage"
								:style="(order==vipToastIndex)?'visibility:visible;background: url('+kuang+') no-repeat center center;background-size: contain;':''">
								<span
									:style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.description}}</span>
							</p><br />
							<image v-if="curLevel<1000&&(curLevel+1>temp.costLevel)"
								:src="$BASE_URL+'/st/mini/static/img/level/icon'+(order+1)+'.png'" alt="" />
							</image>
							<image v-else :src="$BASE_URL+'/st/mini/static/img/level/iconhui'+(order+1)+'.png'" alt="" />
							</image>

							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.title}}</p>

							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">
								VIP{{temp.costLevel}}专属</p>
						</div>
						<div v-for="(temp,order) in vipLevel" v-if="index==1&&order>2&&order<6"
							@click="changeVip(order)">
							<!--<p   class="blank"></p>-->
							<p class="alertMessage"
								:style="(order==vipToastIndex)?'visibility:visible;background: url('+kuang+') no-repeat center center;background-size: contain;':''">
								<span
									:style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.description}}</span>
							</p><br />
							<image v-if="curLevel<1000&&(curLevel+1>temp.costLevel)"
								:src="$BASE_URL+'/st/mini/static/img/level/icon'+(order+1)+'.png'" alt="" />
							</image>
							<image v-else :src="$BASE_URL+'/st/mini/static/img/level/iconhui'+(order+1)+'.png'" alt="" />
							</image>

							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.title}}</p>

							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">
								VIP{{temp.costLevel}}专属</p>
						</div>
						<div v-for="(temp,order) in vipLevel" v-if="index==2&&order>5" @click="changeVip(order)">
							<!--<p class="blank"></p>-->
							<p class="alertMessage"
								:style="(order==vipToastIndex)?'visibility:visible;background: url('+kuang+') no-repeat center center;background-size: contain;':''">
								<span
									:style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.description}}</span>
							</p><br />
							<image v-if="curLevel<1000&&(curLevel+1>temp.costLevel)"
								:src="$BASE_URL+'/st/mini/static/img/level/icon'+(order+1)+'.png'" alt="" />
							</image>
							<image v-else :src="$BASE_URL+'/st/mini/static/img/level/iconhui'+(order+1)+'.png'" alt="" />
							</image>

							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">{{temp.title}}</p>
							<p :style="curLevel>1000||curLevel<temp.costLevel?'color:#8f8f8f;':''">
								VIP{{temp.costLevel}}专属</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		</view>
		<view v-if="circleShow" style="width: 100%;height: 100%;background: rgba(255,255,255,1);display: flex;align-items: center;justify-content: center;">
			<view style="width: 200upx;height: 200upx;background: rgba(0,0,0,0.3);display: flex;align-items: center;justify-content: center;border-radius: 20upx;">
				<u-loading mode="circle" size='40'></u-loading>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circleShow:true,
				$BASE_URL:this.$BASE_URL,
				activeIndex: 0,
				vipLevel: [],
				headImg: '',
				curLevel: '',
				levelWidth: '',
				alreadyConsumed: '',
				iosAlreadyConsumed: '',
				upGrade: '',
				iosUpGrade: '',
				nickName: '',
				roomId: '',
				maxLevel: '',
				vipToastIndex: -1, //vip点击toast提示是否显示,选中的vip顺序
				timer: null,
				sys: '',
				userId: '',
				vipdengjika:'',
				faguang:'',
				qvshengji:'',
				huxing:'',
				kuang:''
			}
		},
		mounted() {
			this.vipdengjika= this.$BASE_URL+'/st/mini/static/img/level/vipdengjika.png'
			this.faguang= this.$BASE_URL+'/st/mini/static/img/level/faguang.png'
			this.qvshengji= this.$BASE_URL+'/st/mini/static/img/level/qvshengji.png'
			this.huxing= this.$BASE_URL+'/st/mini/static/img/level/huxing.png'
			this.kuang= this.$BASE_URL+'/st/mini/static/img/level/kuang.png'
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.userId = res.data.userId
					that.getVip()
				}
			});

		},
		methods: {
			getVip() {
				var data = {
					url: '/web/v1/costlevel/vip',
					methods: 'post',
					data: {
						userId: this.userId
					}
				}
				this.$http(data).then(res => {
					this.vipLevel = res.data.vipLevel;
					this.headImg = this.$global.getImageUrl(res.data.headImg, 'https://ourydcimage.shenghua6.cn')
					this.curLevel = res.data.curLevel;
					this.levelWidth = (res.data.totalCost - res.data.costMin) / (res.data.costMax - res.data
						.costMin) * 3.15;
					this.alreadyConsumed = res.data.totalCost / 100;
					this.iosAlreadyConsumed = res.data.totalCost
					this.upGrade = (res.data.costMax - res.data.totalCost) / 100;
					this.iosUpGrade = res.data.costMax - res.data.totalCost
					this.nickName = res.data.nickName;
					this.roomId = res.data.roomId;
					this.maxLevel = res.data.maxLevel;
					this.circleShow=false
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.sys = 'ios'
					} else {
						this.sys = 'android'
					}
				})
			},
			//点击vip图标显示的提示信息
			changeVip(value) {
				this.vipToastIndex = value
				if (value + 1 > 0) {
					if (this.timer) {
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(() => {
						this.vipToastIndex = -1;
					}, 1500)
				}
			},
			changeActiveSlide() {
				uni.showToast({
					title: '更多精彩请下载“哩咔”APP',
					icon: 'none',
					duration: 2000
				});
			},
			goRulePage() {
				uni.navigateTo({
					url: './rule'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*顶部标题栏样式*/
	.title {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		background: #333944;
		z-index: 120;
		font-size: 30upx;
		color: #666666;
		padding-bottom: 20upx;
	}

	.title span {
		margin-left: 50upx;
		width: 50upx;
		height: 48upx;
		opacity: 0;
	}

	.flex {
		width: 100%;
		padding-top: 80upx;
	}

	.flex p.active {
		font-size: 36upx;
		font-weight: bold;
		color: #ffffff;
		transition: color 0.4s;
	}

	.topBtnBoxYbb {
		position: absolute;
		top: 50%;
		margin-top: -25upx;
		left: 50%;
		transform: translateX(-50%);
		width: 460upx;
		height: 49upx;
		margin-right: 30upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		line-height: 49upx;
	}

	.topBtnBoxMoYin {
		position: absolute;
		top: 50%;
		margin-top: -25upx;
		left: 50%;
		transform: translateX(-50%);
		width: 460upx;
		height: 49upx;
		margin-right: 30upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		line-height: 49upx;
	}

	.flex div p {
		width: 33%;
		text-align: center;
		white-space: nowrap;
	}

	.flex .decalar {
		color: #ffffff;
		height: 49upx;
		line-height: 49upx;
		position: absolute;
		top: 50%;
		margin-top: -25upx;
		right: 30upx;
	}

	.vipLevel {
		position: relative;
		background: #333944;
	}

	.userInfo {
		width: 539upx;
		height: 334upx;
		margin: auto;
		top: 330upx;
		transition-timing-function: ease-in;
		/*transition: 1.2s top ;*/
	}

	/*用户信息*/
	.headInfo {
		width: 100%;
		height: 110upx;
		position: absolute;
		top: 5%;
		left: 12%;
	}

	.headInfo .headPic {
		width: 94upx;
		height: 94upx;
		border-radius: 50%;
		border: 2upx solid #ffffff;
		position: absolute;
		top: 50%;
		left: 7%;
		margin-top: -47upx;
	}

	.nickName {
		position: absolute;
		top: 26upx;
		left: 145upx;
	}

	.nickName span {
		display: inline-block;
		max-width: 280upx;
		min-width: 80upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24upx;
		color: #734905;
		vertical-align: middle;
		margin-left: 10upx;
	}

	.nickName .costLevel {
		width: 52upx;
		height: 24upx;
		vertical-align: middle;
		/*更改线上bug增加左边距*/
		margin-left: 10upx;
	}

	.levelLine {
		width: 312upx;
		height: 8upx;
		background-color: #686566;
		border-radius: 4upx;
		position: absolute;
		overflow: visible;
		top: 70upx;
		left: 155upx;
	}

	.levelLine .line {
		width: auto;
		height: 46upx;
		position: absolute;
		top: 0;
		overflow: visible;
		white-space: nowrap;
		left: 0;
	}

	.levelLine .line span:first-child {
		float: left;
		width: 222upx;
		height: 8upx;
		background: linear-gradient(to right, #fc3318, #ffdb4c);
		border-radius: 4upx;
		/*display: inline-block;*/
		/*position: relative;*/
		/*top: 0;*/
		vertical-align: middle;
		min-width: 15upx;
	}

	.levelLine .line span:last-child {
		float: left;
		width: 13upx;
		height: 46upx;
		// background: url(../img/faguang.png) no-repeat center right;
		background-size: contain;
		display: inline-block;
		position: relative;
		top: 0;
		margin-top: -19upx;
		vertical-align: middle;
		left: -8upx;
	}

	.vipNow {
		width: 322upx;
		height: auto;
		position: absolute;
		top: 82upx;
		left: 143upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		color: #734905;
		font-size: 20upx;
		font-weight: bold;
		padding: 0 10upx;
	}

	/*已消费具升级样式*/
	.consumptionDetails {
		width: 100%;
		height: 30upx;
		font-size: 20upx;
		color: #734905;
		position: absolute;
		top: 180upx;
		white-space: nowrap;
		left: 10upx;
	}

	/*去升级样式*/
	.upgrade {
		width: 320upx;
		height: 89upx;
		z-index: 100;
		position: absolute;
		top: 228upx;
		left: 50%;
		transform: translateX(-50%);
	}

	.animateScale {
		animation: scaleBtn 0.3s 2 ease-in;
	}

	/*特权样式*/
	.privilege {
		width: 100%;
		height: 100upx;
		position: relative;
		top: -65upx;
		left: 0;
		background-color: transparent;
		padding-top: 115upx;
	}

	.bottomcontainer {
		width: 100%;
		height: auto;
		background-color: #ffffff;
		text-align: center;
		padding-top: 30upx;
	}

	.bottomcontainer .flexBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		position: relative;
		padding-bottom: 15upx;
	}

	.bottomcontainer .flexBox .buyying {
		position: absolute;
		right: 5upx;
		top: 0;
		width: 100upx;
		height: 36upx;
	}

	.alertMessage {
		width: 200upx;
		height: 59upx;
		overflow: visible;
		color: #734905;
		font-size: 22upx;
		line-height: 50upx;
		visibility: hidden;
		display: inline-block;
		text-align: center;
		margin: 0 auto;
	}

	.bottomcontainer .flexBox div image {
		width: 90upx;
		height: 90upx;
		margin-bottom: -9upx;
	}

	.bottomcontainer .flexBox div {
		flex: 0 0 33%;
		position: relative;
		/*width: 0.9upx;*/
		color: #734905;
		font-size: 24upx;
		white-space: nowrap;
		font-weight: bold;
		line-height: 33upx;
		text-align: center;
		/*min-height: 2upx;*/
	}

	.bottomcontainer .flexBox div .light {
		font-weight: normal;
		opacity: 0.8;
	}

	.vipTeQuan {
		width: 400upx;
		height: 34upx;
		position: absolute;
		top: 79upx;
		left: 50%;
		transform: translateX(-50%);
	}

	/*过渡样式*/
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0
	}

	/*swiper样式*/
	.swiper-container {
		width: 100%;
		height: auto;
		position: relative;
		top: 20upx;
		left: 0;
		z-index: 10;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18upx;
		height: auto;
	}
</style>
